﻿@page "/circular-gauge/arc-gauges"

@using Syncfusion.Blazor.CircularGauge
@using Syncfusion.Blazor.Inputs

@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample visualizes the progress of work in the circular gauge using the range bar pointer with the rounded corners.</p>
</SampleDescription>
<ActionDescription>
   <p>In this example, you can see how to render the ranges and range bar pointer with rounded corners. A slider is placed at the bottom of the gauge using annotation to change the range bar pointer value. Based on the value, the color of the pointer can also be changed.</p>
   <p>More information on the circular gauge can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/circular-gauge/user-interaction/'>documentation section</a>.</p>
</ActionDescription>

<div class="control-section">
    <SfCircularGauge Title="Progress Tracker">
        <CircularGaugeAxes>
            <CircularGaugeAxis StartAngle="200" EndAngle="160" Minimum="1" Maximum="100" Radius="80%">
                <CircularGaugeAxisLineStyle Width="0.01"/>
                <CircularGaugeAxisLabelStyle Position="Position.Inside" UseRangeColor="true">
                    <CircularGaugeAxisLabelFont Size="0px" Color="transparent"/>
                </CircularGaugeAxisLabelStyle>
                <CircularGaugeAxisMajorTicks Height="0.01"/>
                <CircularGaugeAxisMinorTicks Height="0.01"/>
                <CircularGaugeRanges>
                    <CircularGaugeRange Start="1" End="100" Radius="90%" StartWidth="30" EndWidth="30" Color="#E0E0E0" RoundedCornerRadius="20"/>
                </CircularGaugeRanges>
                <CircularGaugePointers>
                    <CircularGaugePointer Value="@PointerValue" RoundedCornerRadius="20" Type="PointerType.RangeBar" Radius="90%" Color="@PointerColor" PointerWidth="30">
                        <CircularGaugePointerAnimation Enable="false"/>
                        <CircularGaugePointerBorder Color="grey" Width="0.01"/>
                    </CircularGaugePointer>
                </CircularGaugePointers>
                <CircularGaugeAnnotations>
                    <CircularGaugeAnnotation Radius="0%" Angle="0" ZIndex="1">
                        <ContentTemplate>
                            <div class="annotationText">@SliderValueText</div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                    <CircularGaugeAnnotation Angle="0" ZIndex="1" Radius="-100%">
                        <ContentTemplate>
                            <div class="sliderAlign">
                                <div style="width: 60%;">
                                    <div>
                                        <input type="range" value="@SliderPointerValue" min="0" max="100" @onchange="RangeStartChange" style="width:250px" />
                                    </div>
                                </div>
                            </div>
                        </ContentTemplate>
                    </CircularGaugeAnnotation>
                </CircularGaugeAnnotations>
            </CircularGaugeAxis>
        </CircularGaugeAxes>
    </SfCircularGauge>
</div>
<style>
    .annotationText{
        font-size:35px;
        width:120px;
        text-align:center;
        margin-top:-30px;
        margin-left:-55px
    }
    .sliderAlign {
        height:70px;
        width:250px;
        margin-left:-120px;
    }
</style> 
@code {
    private double SliderPointerValue = 60;
    private string PointerColor = "#e5ce20";
    private double PointerValue = 60;
    private string SliderValueText = "60/100";
    private void RangeStartChange(Microsoft.AspNetCore.Components.ChangeEventArgs args) {
        SliderPointerValue = Convert.ToDouble(args.Value);
        PointerValue = SliderPointerValue;
        if (SliderPointerValue >= 0 && SliderPointerValue < 20) {
            PointerColor = "#ea501a";
        }
        else if (SliderPointerValue >= 20 && SliderPointerValue < 40) {
            PointerColor = "#f79c02";
        }
        else if (SliderPointerValue >= 40 && SliderPointerValue < 60) {
            PointerColor = "#e5ce20";
        }
        else if (SliderPointerValue >= 60 && SliderPointerValue < 80) {
            PointerColor = "#a1cb43";
        }
        else if (SliderPointerValue >= 80 && SliderPointerValue < 100) {
            PointerColor = "#82b944";
        }
        SliderValueText = SliderPointerValue.ToString() + "/100";
    }
}